
//图表面板
.clear{
    clear: both;
}

.chart-theme{
    width: 25px;
    height: 25px;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    margin-right:5px;
}
.graph-wrapper{
    .dashed-bottom{
        border-bottom: 1px dashed  #d1d1d1;
    }
    p{
        margin: 0;
    }
    .full-top-menu{
        padding-left: 10px;
        padding-bottom: 10px;
    }
    .graph-right{
        width: 290px;
        padding: 16px 0;
        z-index: 101;
        top: 50px;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .graph-main{
        border:1px solid @border-color-base;
        .left{
            background: #f7f7f7;
            top: 50px;
            bottom: 0;
            overflow-y: auto;
            float: left;
            width: 300px;
            height: calc(~ '100vh - 120px');
            .datasoure{
                padding: 5px 10px;
                min-height: calc(~'100vh - 164px');
                .title{
                    color: #777777;
                    margin: 5px 0;
                }
                .tablefield{
                    background: #fff;
                    list-style: none;
                    padding: 0;
                    height: calc(~'100vh - 276px');
                    overflow-x: hidden;
                    overflow-y: auto;
                    li{
                        cursor: pointer;
                        padding-left: 10px;
                        height: 32px;
                        line-height: 32px;
                    }
                    li:hover{
                        background: #ebf7ff;
                    }
                }
            }
            .graph-style {
                height: calc(~'100vh - 164px');
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
        .content{
            position: relative;
            overflow-x: auto;
            border-left:1px solid @border-color-base;
            padding:0 25px 25px 25px ;
            height: calc(~ '100vh - 120px');
            margin-left:300px;
            z-index: 999;
            background: #f5f5f5;
            .scorller-cnt{
                min-width: 950px;
                height: 100%;
            }
            .graph-content{
                width: 100%;
                height: calc(~ '100% - 93px');
                font-size: 14px;;
                position: relative;
                .left-filter{
                    // width: 16%;
                    width: 225px;
                    float: left;
                    overflow-y: auto;
                    overflow-x: hidden;
                    min-height: 100%;
                    border-right: 1px solid @border-color-base;
                    .filter-layer{
                        padding: 16px 14px 12px;
                        overflow: hidden;
                        position: relative;
                        min-height: 300px;
                    }
                    .t-center{
                        text-align: center;
                    }
                }
                .graph-chart{
                    padding: 0;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    left: 0;
                    background-color: #fff;
                }
            }
        }

    }

    .add-graph-right{
        height: 100%;
        .right-content{

            // margin-left: 16px;
            background-color: @background-color-base;
            border: 0;
            border-top: 1px solid @border-color-base;
            .el-collapse-item__content{
                padding-left: 20px;
            }
            .right-row{
                margin-bottom: 6px;
                // overflow: hidden;
                .r-tit{
                    width: 72px;
                    display: inline-block;
                    height: 32px;
                    line-height: 32px;
                }
                .r-cnt{
                    float: right;
                    width:  calc(~ '100% - 72px');
                    &.r-check {
                      padding-top: 6px;
                    }
                }

            }
            .right-row::after{
                content: " ";
                clear: both;
                display: block;
            }
            .right-graph-type{
                li{
                    display: inline-block;
                    height: 60px;
                    cursor: pointer;
                    text-align: center;
                    border-radius: 2px;
                    padding: 2px 0;
                    position: relative;
                    width: 65px;
                    font-size: 12px;
                    i{
                        font-size: 25px;
                    }
                }
                .svg-full{
                    position: absolute;
                    opacity: 0;
                    z-index: 9;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                }
                .disabled{
                    color: #c4c8cf;
                    border: 2px solid #fff;
                    opacity: 0.3;
                }
                .active{
                    color: #212121;
                    opacity: 1;
                    border: 2px solid #fff;
                }
                .selected{
                    background: #D8E3FB;
                }
                .selectedEmbed{
                    border: 2px solid @link-color;
                }
            }
        }
    }
}

//图表面板  自定义下拉菜单组件
.group-menu{
    position: relative;
    .column-menu{
        position: absolute;
        background: #fff;
        color: @normal-color ;
        left: -10px;
        min-width: 120px;
        z-index: 888;
        box-shadow: 0 1px 6px rgba(0,0,0,.2);
        top: 32px;
        box-sizing: border-box;
        border-radius: 4px;
        right: -10px;
        transform-origin: center top 0px;

    will-change: top, left;
        .column-group-item{
            padding: 2px 10px;
            cursor: pointer;
        }
        .group{
            border-top: 1px solid @border-color-base;
            color: #3a3a3a;
        }
        .selected{
            color: @link-color;
        }
        .column-group-item:hover{
            background: @background-color-base;

        }
    }

}
.graph-column{
  .column-group {
      font-size: 14px;
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #d8d8d8;
      .title{
          width: 80px;
          .rounds{
              width: 16px;
              height: 42px;
          }
          .rounds::after{
              content: ' ';
              width: 16px;
              height: 16px;
              background: #6cc8d7;
              float: left;
              border-radius: 16px;
              margin-top: 12px;
              margin-right: 5px;
          }
      }
      ul{
          height: 30px;
          line-height: 30px;
          padding-top:6px;
      }
      .ivu-select-dropdown {
          min-height: 200px;
      }
  }
  .column{
      font-size: 14px;
      height: 42px;
      line-height: 42px;
      border: 1px solid transparent;
      border-bottom: 1px solid #d8d8d8;
      padding: 0 6px;
      &.droping {
        border-color: #81c5d4;
        background-color: rgba(129, 197, 212, 0.3);
      }
      .title{
          width: 60px;
          .rounds{
              width: 16px;
              height: 42px;
          }
          .rounds::after{
              content: ' ';
              width: 16px;
              height: 16px;
              background: #6cc8d7;
              float: left;
              border-radius: 16px;
              margin-top: 12px;
              margin-right: 5px;
          }
      }
      ul{
          height: 30px;
          line-height: 30px;
          padding-top:6px;
      }
      li{
          list-style: none;
          float: left;
          border-radius: 20px;
          background:#f0f2f5;
          color: #3a3a3a;
          padding: 0 10px;
          border-radius: 2px;
          margin-right: 15px;
          line-height: 22px;
          margin-top: -3px;
          .close{
              // position: absolute;
              // right: 0;
              // top: 0;
              .fa{
                  background: @background-color-base;
                  color:@btn-default-bg;
                  border-radius: 100px;
                  padding: px;
                  height: 14px;
                  width: 15px;
                  text-align: center;
              }
          }
      }
      .cloumntit{
          padding-left: 5px;
          padding-right: 5px;
      }
  }
}
.graph-column.graph-column-box {
  .column {
    line-height: 30px;
    height: 30px;
    .title {
      .rounds::after {
        width: 10px;
        height: 10px;
        margin-top: 10px;
      }
    }
  }
}

//拖拽进度条
.view-slider{
    position:relative;margin:7px 0;width:90%;height:10px;background:@background-color-base;border-radius:5px;cursor:pointer;
    .process{position:absolute;left:0;top:0;width:112px;height:15px;border-radius:5px;background:@link-color}
    .thunk{position:absolute;left:100px;top:-7px;width:20px;height:20px;z-index:2;}
    .block{
        width:20px;height:20px;border-radius:50%;
        border:2px solid @link-color;
        background:@background-color-base;
        transition:.2s all}
    .tips{
            z-index: 1;
            position: absolute;
            right: -12px;
            bottom: -8px;
            min-width: 15px;
            text-align: center;
            border-radius: 5px;
            height: 24px;
            color: @normal-color ;
    }
    .block:hover{transform:scale(1.1);opacity:.6}
}
//拖拽进度条 end


.overview-btn {
    width: 100%;
    border-radius: 0;
}

.graph-panel {
    width: 100%;
    height: 100%;
}

.graph-detail-wrapper {
    text-align: center;
    .panel {
        width: 60vw;
        height: 80vh;
        margin: auto;
        padding: 25px;
        // background: @theme-nav-back;
    }
}
.filter-disabled{
    color: #c4c8cf;
    border: 2px solid #fff;
    opacity: 0.3;
}

.zl-dropdown-group {
    width: 360px;
    margin-top: 4px;
}
.zl-attr-item {
  position: relative;
  font-size: 12px;
  text-align: left;
}
.zl-attr-item-body {
  padding: 6px 10px;
  background-color: rgba(204, 204, 204, 0.3)
}
.zl-attr-item .zl-attr-item-body:hover {
  cursor: pointer;
  background-color: rgba(204, 204, 204, 0.4)
}
.zl-attr-item + .zl-attr-item {
  margin-top: 10px;
}
.zl-flex {
  display: flex;
}
.zl-flex-1 {
  flex: 1;
  min-width: 0;
}
